<template>
  <div
    class="page"
    :style="pageStyle"
    :class="{ 'current-page': isCurrentPage }"
  >
    <!-- 页码显示 -->
    <div
      v-if="showPageNumber"
      :class="['page-number', pageNumberPositionClass]"
    >
      {{ formattedPageNumber }}
    </div>
    
    <!-- 询问次数显示 -->
    <div
      v-if="showInquiryCount"
      :class="['inquiry-count', inquiryCountPositionClass]"
    >
      {{ formattedInquiryCount }}
    </div>
    <div class="page-content" :style="contentStyle" v-html="content"></div>
    <!-- 被询问人签名栏 -->
    <div
      v-if="showSignature"
      :class="['signature-bar', signaturePositionClass]"
    >
      <span class="signature-label">被询问人：</span>
      <span class="signature-flex-spacer"></span>
      <span v-if="showSignatureDate" class="signature-date">&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { computeLineSpacing } from '../../utils/printStyles.js'

const props = defineProps({
  content: {
    type: String,
    required: true
  },
  pageStyle: {
    type: Object,
    required: true
  },
  contentStyle: {
    type: Object,
    required: true
  },
  isCurrentPage: {
    type: Boolean,
    default: false
  },
  lineSpacing: {
    type: [String, Number],
    default: '8mm',
  },
  pageNumber: Number,
  totalPages: Number,
  pageNumberPosition: String, // top_right, top_left, bottom_left, none
  pageNumberFormat: String, // arabic, chinese, chinese_upper
  inquiredSignature: String, // none, bottom_right, bottom_left, bottom_left_date
  inquiryCount: String, // print, none
  inquiryCountFormat: String, // arabic, chinese, chinese_upper
  inquiryCountData: [Number, String] // 询问次数数据 (cs字段)
})

const computedLineSpacing = computed(() => {
  return computeLineSpacing(props.lineSpacing)
})

const showPageNumber = computed(() => {
  return props.pageNumberPosition && props.pageNumberPosition !== 'none'
})

const showInquiryCount = computed(() => {
  return props.inquiryCount && props.inquiryCount === 'print' && props.inquiryCountData
})

const pageNumberPositionClass = computed(() => {
  switch (props.pageNumberPosition) {
    case 'top_left': return 'page-number-top-left'
    case 'top_right': return 'page-number-top-right'
    case 'bottom_left': return 'page-number-bottom-left'
    case 'bottom_right': return 'page-number-bottom-right'
    default: return 'page-number-top-right'
  }
})

const inquiryCountPositionClass = computed(() => {
  // 询问次数始终显示在右上角页码下方
  return 'inquiry-count-top-right'
})

function toChinese(num) {
  const cn = ['零','一','二','三','四','五','六','七','八','九']
  return String(num).split('').map(d => cn[+d]).join('')
}
function toChineseUpper(num) {
  const cn = ['零','壹','贰','叁','肆','伍','陆','柒','捌','玖']
  return String(num).split('').map(d => cn[+d]).join('')
}

const formattedPageNumber = computed(() => {
  let cur = props.pageNumber
  let total = props.totalPages
  let curStr = cur, totalStr = total
  switch (props.pageNumberFormat) {
    case 'chinese':
      curStr = toChinese(cur)
      totalStr = toChinese(total)
      break
    case 'chinese_upper':
      curStr = toChineseUpper(cur)
      totalStr = toChineseUpper(total)
      break
    default:
      curStr = cur
      totalStr = total
  }
  return `第${curStr}页 共${totalStr}页`
})

const formattedInquiryCount = computed(() => {
  if (!props.inquiryCountData) return ''
  
  let countStr = props.inquiryCountData
  switch (props.inquiryCountFormat) {
    case 'chinese':
      countStr = toChinese(props.inquiryCountData)
      break
    case 'chinese_upper':
      countStr = toChineseUpper(props.inquiryCountData)
      break
    default:
      countStr = props.inquiryCountData
  }
  return `第${countStr}次`
})

const showSignature = computed(() => {
  return props.inquiredSignature && props.inquiredSignature !== 'none'
})

const showSignatureDate = computed(() => {
  return props.inquiredSignature === 'bottom_left_date'
})

const signaturePositionClass = computed(() => {
  switch (props.inquiredSignature) {
    case 'bottom_left':
    case 'bottom_left_date':
      return 'signature-bottom-left'
    case 'bottom_right':
      return 'signature-bottom-right'
    default:
      return 'signature-bottom-right'
  }
})

const today = new Date()
  .toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
  .replace(/\//g, ' 年 ').replace(' 年 ', ' 年 ').replace(' 年 ', ' 年 ').replace(' 月 ', ' 月 ').replace(' 日', ' 日')
  .replace(/(\d{4}) 年 (\d{2}) 月 (\d{2}) 日/, '$1 年 $2 月 $3 日')

</script>

<style scoped>
.page {
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  position: relative;
}

.page.current-page {
  border-color: #409eff;
  box-shadow: 0 6px 12px rgba(64, 158, 255, 0.2);
}

.page-content {
  width: 100%;
  height: 100%;
}

/* 记录行样式 */
:deep(.record-line) {
  min-height: 1.5em;
  padding-bottom: 2px;
  margin-bottom: 0;
  line-height: inherit;
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* 动态行距 */
  margin-bottom: v-bind('computedLineSpacing');
}

/* 根据设置显示不同类型的横线 */
:deep(.record-line.solid) {
  border-bottom: 1px solid #333;
}

:deep(.record-line.dashed) {
  border-bottom: 1px dashed #333;
}

:deep(.record-line.none) {
  border-bottom: none;
}

:deep(.record-line h3) {
  border-bottom: none !important;
  text-align: center;
  margin: 0;
  text-indent: 0 !important;
}

/* 确保空白行也有足够的高度显示横线 */
:deep(.record-line:empty::after) {
  content: " ";
  visibility: hidden;
}

.page-number {
  position: absolute;
  font-size: 13px;
  color: #666;
  z-index: 10;
  background: rgba(255,255,255,0.8);
  padding: 2px 10px;
  border-radius: 4px;
  user-select: none;
}
.page-number-top-left {
  top: 8px;
  left: 16px;
}
.page-number-top-right {
  top: 8px;
  right: 16px;
}
.page-number-bottom-left {
  bottom: 8px;
  left: 16px;
}
.page-number-bottom-right {
  bottom: 8px;
  right: 16px;
}

.inquiry-count {
  position: absolute;
  font-size: 13px;
  color: #666;
  z-index: 10;
  background: rgba(255,255,255,0.8);
  padding: 2px 10px;
  border-radius: 4px;
  user-select: none;
}
.inquiry-count-top-right {
  top: 32px; /* 页码下方 */
  right: 16px;
}

.signature-bar {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  color: #333;
  z-index: 10;
  pointer-events: none;
  user-select: none;
}
.signature-label {
  min-width: 80px;
  flex-shrink: 0;
  margin-right: 12px;
}
.signature-flex-spacer {
  flex: 1 1 auto;
}
.signature-bottom-left {
  justify-content: flex-start;
}
.signature-bottom-right {
  justify-content: flex-end;
}
.signature-bar.signature-bottom-right {
  left: auto;
  right: 60px;
  width: 180px;
}
.signature-date {
  font-size: 13px;
  color: #666;
  min-width: 120px;
  text-align: right;
  letter-spacing: 2px;
  border-bottom: none;
  padding-bottom: 0;
}
</style>
